<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">

<style>
input[type='text'], input[type='password'], button {
	margin-top: 20px;
	height: 25px;
}

.login_article {
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid #ccc;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 385px;
	height: 170px;
	margin: auto;
}

.login_article_image {
	float: left;
	margin: 20px;
}

#btn_login {
	margin-left: 280px;
}

#register {
	margin-left: 210px;
}

.errorMsg {
	margin-top: 10px;
}

body {
	background-image: url("img/misaka001.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.img_box {
	float: right;
	width: 27px;
	height: 50px;
	margin-top: -1px;
	margin-right: 2px;
	background-image: url(img/superscript.jpg);
	background-position: -30px -180px;
}

.div-a {
	position: absolute;
	z-index: 100;
}

.div-b {
	position: absolute;
	z-index: 80;
}
</style>
<script>
function init(){
    document.querySelector("#username").addEventListener("blur",()=>{
        let xhr=new XMLHttpRequest();
        let url="user.servlet?param=checkName&username="+document.getElementById("username").value;
        xhr.responseType="json";
        xhr.open("GET",url,true);
        xhr.addEventListener("readystatechange",()=>{
            if(xhr.readyState==4&xhr.status==200){
                let json=xhr.response;
                if(json.result=="ok"){
                    console.log(json.name);
                }
            }
        },false);
        xhr.send(null);
    },false);
}
   
   //     document.getElementById("register").addEventListener("click",(e)->{
    //            
    //            location.href="regisper.html";
    //    },false);
  
   window.addEventListener("load",init,false);
</script>
</head>
<body>

	<article class="login_article">
		<aside class="img_box"></aside>
		<aside class="login_article_image">

			<img src="img/misaka-000.png" height="110px;">

		</aside>

		<section>
			<form action="user.servlet?param=login" method="POST">
				用户名:<input type="text" name="username"><br>
				密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"><br>
				<div float="left">
					<input type="checkbox" value="yes" name="isCookie">一周内免登录
				</div>
				<div class="div-a">
					<button name="register" id="register" type="submit"
						formaction="user.servlet?param=register">注册</button>
				</div>
				<div class="div-b">
					<button id="btn_login" type="submit">登录</button>
				</div>
			</form>

		</section>
	</article>
</body>
</html>